Support f-children element filters - #7658
Support f-children element filters#7658Pradeep Ramola (pradeep-ramola) wants to merge 3 commits into
Conversation
|
Azure Pipelines: There may be pipelines that require an authorized user to comment /azp run to run. |
|
|
||
| document.body.insertAdjacentHTML( | ||
| "beforeend", | ||
| `<f-template name="${elementName}"><template><ul f-children="{allChildren filter elements()}">Text node<f-repeat value="{{item in items}}"><li>{{item}}</li></f-repeat></ul><div f-children="{filteredChildren filter elements(span)}"><span>Included</span><button>Ignored</button>Text node</div></template></f-template>`, |
There was a problem hiding this comment.
We do not rely on injecting the f-template via javascript, this should be placed in one of the fixture tests, in this case I would expect this in the one for children which is located in packages/fast-element/test/declarative/fixtures/directives/children. The template bridge is for testing the declarativeTemplate functionality in terms of lifecycle and attachment and DeclarativeTemplateBridge.
There was a problem hiding this comment.
Addressed in the latest push. I removed the injected template-bridge.pw.spec.ts coverage and moved the f-children filter assertions into the existing packages/fast-element/test/declarative/fixtures/directives/children fixture, including the generated fixture HTML.
Validated with:
npx playwright test --config=playwright.declarative.config.ts test/declarative/fixtures/directives/children/children.spec.ts --project=chromiumnpx playwright test src/declarative/template-bridge.pw.spec.ts --project=chromiumnpm run build:tsc -w @microsoft/fast-elementnpm run lint -w @microsoft/fast-elementnpx beachball check --branch origin/main
Jane Chu (janechu)
left a comment
Jane Chu (janechu)
left a comment
There was a problem hiding this comment.
Please place the tests in the appropriate location, otherwise looks good :)
2 participants
Pull Request
📖 Description
Updates the declarative template parser so
f-childrensupports the samefilter elements(...)syntax thatf-slottedalready supports.Previously,
f-children="{childItems filter elements()}"treated the whole string as the property name. Now it resolves tochildren({ property: "childItems", filter: elements() }).🎫 Issues
Fixes #7631
👩💻 Reviewer Notes
The parser now shares node directive option parsing between
children()andslotted(). Existingf-slottedbehavior is preserved.📑 Test Plan
Tested locally with:
npx playwright test src/declarative/template-bridge.pw.spec.ts --project=chromiumnpm run build:tsc -w @microsoft/fast-elementnpm run lint -w @microsoft/fast-elementnpx beachball check --branch origin/mainNote: Firefox/WebKit Playwright browsers are not installed locally, so the all-browser run could not complete. Chromium passed.
✅ Checklist
General
$ npm run changeAgents
⏭ Next Steps
No follow-up work is planned for this PR.